<!-- 能耗对标分析 -->

<template>
  <div class="flex flex-col w-100% p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card-1 -->
    <div class="flex flex-col h-200px mb-10px" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地能耗对标</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker v-model="shjdnxdbDate" type="daterange" range-separator="至" unlink-panels
            start-placeholder="开始时间" end-placeholder="结束时间" @changn="dateChangeFormat(shjdnxdbDate)" />
          <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Search">查询</el-button>
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetShjdnxdb">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1 flex flex-wrap justify-evenly content-center">
        <div
          class="flex justify-between items-center w-30% h-110px pl-30px pr-30px box-border bg-[#FFF0B1] rounded-4px text-[#FF9900]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)">
          <div class="flex items-center">
            <img class="w-60px h-60px mr-13px" src="../../../assets/image/dataConsumption/nhzl-icon.png" alt="" />
            <span class="text-24px">园区单位产值能耗排名<br />与首名比值</span>
          </div>

          <div class="text-center">
            <div class="text-24px">第<span class="text-40px font-bold">3</span>名</div>
            <div class="text-40px" style="font-family: CenturyGothic">130%</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px pl-30px pr-30px box-border bg-[#E7FFFB] rounded-4px text-[#00CD99]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.5)">
          <div class="flex items-center">
            <img class="w-60px h-60px mr-13px" src="../../../assets/image/dataConsumption/dhzl-icon.png" alt="" />
            <span class="text-24px">园区单位产值电耗排名<br />与首名比值</span>
          </div>

          <div class="text-center">
            <div class="text-24px">第<span class="text-40px font-bold">3</span>名</div>
            <div class="text-40px" style="font-family: CenturyGothic">130%</div>
          </div>
        </div>

        <div
          class="flex justify-between items-center w-30% h-110px pl-30px pr-30px box-border bg-[#E0E6FF] rounded-4px text-[#94A8FF]"
          style="box-shadow: 0px 1px 8px 0px rgba(153, 153, 153, 0.42)">
          <div class="flex items-center">
            <img class="w-60px h-60px mr-13px" src="../../../assets/image/dataConsumption/yszl-icon.png" alt="" />
            <span class="text-24px">园区单位产值水耗排名<br />与首名比值</span>
          </div>

          <div class="text-center">
            <div class="text-24px">第<span class="text-40px font-bold">3</span>名</div>
            <div class="text-40px" style="font-family: CenturyGothic">130%</div>
          </div>
        </div>
      </div>
    </div>

    <!-- card-2 -->
    <div class="flex-1 flex flex-col mb-10px" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">各石化基地能效对比</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker v-model="nxdbDate" type="daterange" range-separator="至" unlink-panels start-placeholder="开始时间"
            end-placeholder="结束时间" @changn="dateChangeFormat(nxdbDate)" />
          <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Search"
            @click="loadNxdbEchat">查询</el-button>
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetNxdb">重置</el-button>
        </div>
      </div>
      <div class="w-100% flex-1">
        <Echarts ref="nxdbEchart"></Echarts>
      </div>
    </div>

    <!-- card-3 -->
    <div class="flex-1 flex flex-col" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <div class="flex justify-between items-center h-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold">石化基地清洁能源使用率对比</span>

        <div class="flex items-center">
          <span class="mr-11px text-[#333] text-14px">选择时间</span>
          <el-date-picker v-model="qjnysyldbDate" type="daterange" range-separator="至" unlink-panels
            start-placeholder="开始时间" end-placeholder="结束时间" @changn="dateChangeFormat(qjnysyldbDate)" />
          <el-button type="primary" class="w-80px ml-50px rounded-15px" :icon="Search"
            @click="loadQjnysyldbEchat">查询</el-button>
          <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetQjnysyldb">重置</el-button>
        </div>
      </div>
      <div class="flex-1">
        <Echarts ref="qjnysyldbEchart"></Echarts>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { Search, Refresh } from '@element-plus/icons-vue'
import moment from 'moment'
import { dateChangeFormat } from '@/utils/date'

/** 石化基地能耗对标 start */
const shjdnxdbDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])

const resetShjdnxdb = () => {
  shjdnxdbDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  shjdnxdbDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')
}
/** 石化基地能耗对标 end */

/** 各石化基地能效对比 start */
const nxdbDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])
const nxdbEchart = ref(null) as any

const nxdbChartOption = {
  legend: {
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  grid: {
    left: 100,
    right: 60,
    bottom: 40,
  },
  dataset: {
    source: [
      ['惠州大亚湾经济\n技术开发区', 43.3, 85.8, 93.7],
      ['上海化学工业经济\n技术开发区', 43.3, 85.8, 93.7],
      ['连云港石化\n产业基地', 43.3, 85.8, 93.7],
      ['宁波石化经济\n技术开发区', 43.3, 85.8, 93.7],
      ['南京化学工\n业园区', 43.3, 85.8, 93.7],
      ['天津南港工\n业区', 43.3, 85.8, 93.7],
      ['福建漳州古雷\n经济开发区', 43.3, 85.8, 93.7],
      ['大连长兴岛石\n化产业基地', 43.3, 85.8, 93.7],
    ],
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    {
      name: '单位产值能耗',
      type: 'bar',
      barWidth: '6',
      itemStyle: {
        normal: {
          color: '#ffbe68',
        },
      },
    },
    {
      name: '单位产值电耗',
      type: 'bar',
      barWidth: '6',
      itemStyle: {
        normal: {
          color: '#8bd887',
        },
      },
    },
    {
      name: '单位产值水耗',
      type: 'bar',
      barWidth: '6',
      itemStyle: {
        normal: {
          color: '#a7a7ff',
        },
      },
    },
  ],
}

function loadNxdbEchat() {
  nxdbEchart.value.initEchat(nxdbChartOption)
}
onMounted(() => {
  loadNxdbEchat()
})

const resetNxdb = () => {
  nxdbDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  nxdbDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadNxdbEchat()
}
/** 各石化基地能效对比 end */

/** 石化基地清洁能源使用率对比 start */
const qjnysyldbDate = ref([
  moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
  moment().format('YYYY-MM-DD HH:mm:ss'),
])
const qjnysyldbEchart = ref(null) as any

const qjnysyldbChartOption = {
  grid: {
    top: 80,
    left: 60,
    right: 60,
    bottom: 40,
  },
  legend: {
    left: 'left',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      animation: false,
    },
    backgroundColor: 'rgba(16,16,52,0.6)',
    textStyle: {
      color: 'white',
    },
  },
  xAxis: [
    {
      type: 'category',
      data: [
        '惠州大亚湾经济\n技术开发区',
        '上海化学工业经济\n技术开发区',
        '连云港石化\n产业基地',
        '宁波石化经济\n技术开发区',
        '南京化学工\n业园区',
        '天津南港工\n业区',
        '福建漳州古雷\n经济开发区',
        '大连长兴岛石\n化产业基地',
      ],
      axisPointer: {
        type: 'shadow',
      },
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}%',
      },
    },
  ],
  series: [
    {
      name: '清洁能源使用量',
      type: 'bar',
      barWidth: 14,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#ffcc00' },
          { offset: 1, color: '#ff9900' },
        ]),
        barBorderRadius: 7,
      },
      tooltip: {
        valueFormatter: function (value) {
          return value
        },
      },
      data: [440, 300, 440, 300, 440, 300, 440, 300],
    },
    {
      name: '清洁能源使用率',
      type: 'line',
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: '#0F86E8',
          lineStyle: {
            color: '#0F86E8',
          },
        },
      },
      tooltip: {
        valueFormatter: function (value) {
          return value + '%'
        },
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4],
    },
  ],
}

function loadQjnysyldbEchat() {
  qjnysyldbEchart.value.initEchat(qjnysyldbChartOption)
}
onMounted(() => {
  loadQjnysyldbEchat()
})

const resetQjnysyldb = () => {
  qjnysyldbDate.value[0] = moment().startOf('month').format('YYYY-MM-DD HH:mm:ss')
  qjnysyldbDate.value[1] = moment().format('YYYY-MM-DD HH:mm:ss')

  loadQjnysyldbEchat()
}
/** 石化基地清洁能源使用率对比 end */
</script>

<style scoped>
</style>
